﻿@{
    ViewBag.Title = "LayoutTable";
}
@section Head{
    <!-- BEGIN PAGE LEVEL STYLES -->
    <link rel="stylesheet" href="~/Content/DT_bootstrap.css" />
    <!-- END PAGE LEVEL STYLES -->
}
<div class="span12">
    <!-- BEGIN EXAMPLE TABLE PORTLET-->
    <div class="portlet box light-grey">
        <h2>LayoutTable</h2>
        <table class="table table-striped table-bordered table-hover" id="sample_1">
            <thead>
                <tr>
                    <th>Username</th>
                    <th class="hidden-480">Email</th>
                    <th class="hidden-480">Points</th>
                    <th class="hidden-480">Joined</th>
                    <th></th>
                </tr>
            </thead>
        </table>
    </div>
</div>
@section scripts{
    <!-- BEGIN PAGE LEVEL PLUGINS -->
    @*<script type="text/javascript" src="~/Scripts/select2.min.js"></script>*@
    <script type="text/javascript" src="~/Scripts/jquery.dataTables.js"></script>
    <script type="text/javascript" src="~/Scripts/DT_bootstrap.js"></script>
    <!-- END PAGE LEVEL PLUGINS -->
    <script>
        $(function () {
            Index.initMenu("2-8");
        });
        //object可以如下初始化表格
        $('#sample_1').DataTable({
            "processing": true,
            "serverSide": true,
            ajax: {
                type: 'post',
                dataSrc: "data",//默认data，也可以写其他的，格式化table的时候取里面的数据
                url: "@Url.Action("TableData")",
                //data: function (d) {//d 是原始的发送给服务器的数据，默认很长。
                //    var param = {};//因为服务端排序，可以新建一个参数对象
                //    param.start = d.start;//开始的序号
                //    param.length = d.length;//要取的数据的
                //    var formData = $("#filter_form").serializeArray();//把form里面的数据序列化成数组
                //    formData.forEach(function (e) {
                //        param[e.name] = e.value;
                //    });
                //    return param;//自定义需要传递的参数。
                //}
            },
            //"sPaginationType": "full_numbers",
            language: Index.tableLanguage(),
            //使用对象数组，一定要配置columns，告诉 DataTables 每列对应的属性
            columns: [
                { data: 'name' },
                { data: 'position' },
                { data: 'salary' },
                {
                    data: function (e) {
                        if (e.office) {
                            return new Date(Number(e.office.replace(/\D/g, ''))).toLocaleDateString()
                        }
                        return "-"
                    }
                },
                {
                    data: function (e) {
                        return "<button class='btn'>按钮</button>"
                    }
                }
            ]
        });
    </script>
}

